<template>
  <div class="drawer-box">
    <div class="list-header">
      <el-button class="show-all-problem" @click="getallproblem">
         全部题目
        </el-button>
          <el-button class="select-button" type="primary" @click="getProlem">搜索</el-button>
          <el-input class="select-box" v-model="selectitle" placeholder="无输入则按照标签和难度查询"></el-input>
          <el-select class="harder-select"
                     size="medium"
                     v-model="pHard"
                     @change="this.handleChangeHard"
                     style="width:15%">
          <el-option v-for="(item,index) in problemHard"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
          </el-select>
          <el-select class="tab-select"
                     size="medium"
                     v-model="pTag"
                     @change="this.handleChangeHard"
                     style="width:15%">
          <el-option v-for="item in problemTags"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
          </el-select>
    </div>
    <div class="problem-list">
     <el-table :data="this.tableData"
              v-loading="loading">
      <el-table-column v-if="this.$store.getters.getIsLogin"
                       label="是否解决"
                       min-width="15%">
        <template slot-scope="scope">
          <span :class="scope.row.isSolved==='✔'?'success-row':scope.row.isSolved==='？'?'warning-row':'error-row'">{{scope.row.isSolved}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="problemId"
                       label="#"
                       min-width="10%"></el-table-column>
      <el-table-column prop="Title"
                       label="题目标题"
                       min-width="50%">
        <template slot-scope="scope">
          <el-link type="primary"
                   @click="toSubmit(scope.row.problemId)">{{scope.row.title}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="ratio"
                       label="通过率"
                       min-width="20%"></el-table-column>
      <el-table-column label="题目难度"
                       min-width="20%">
        <template slot-scope="scope">
          <el-tag :type="scope.row.difficult==='简单'?'success': scope.row.difficult==='中等'? 'warning':'danger'"
                  effect="dark"> {{scope.row.difficult}} </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="题目来源"
                       prop="belongToOj"
                       min-width="20%"></el-table-column>
    </el-table>
    </div>
    <div class="page-select">
    <el-pagination class="pagination"
                   layout="prev, pager, next, jumper"
                   :background=true
                   :current-page="this.currentPage"
                   @current-change="switchPage"
                   :total="this.total"
                   :page-size="this.pageSize"></el-pagination>
      </div>
   </div>
</template>
<script>
export default {
  components: {
  },
  props: {
  },
  data () {
    return {
      loading: false,
      writesloved: false,
      isSolved: false,
      currentPage: 1,
      pageSize: 18,
      total: 0,
      count: 1,
      pHard: '题目难度',
      pTag: '题目标签',
      drawer: false,
      searchTitle: '',
      problemTags: [],
      problemHard: [
        {
          value: 1,
          label: '简单'
        },
        {
          value: 2,
          label: '中等'
        },
        {
          value: 3,
          label: '困难'
        }
      ],
      activeIndex: ['1']
    }
  },
  watch: {
  },
  mounted () {
    this.getProblemTags()
    this.getProlem()
  },
  methods: {
    async getProblemTags () {
      let params = new URLSearchParams()
      let dataProblemTags = await this.$http
        .get('/problem_tag/all', params)
      let dataTempTags = dataProblemTags.datas[0]
      if (typeof dataTempTags === 'undefined') {
        return
      }
      this.problemTags = dataTempTags
    },
    toSubmit (pid) {
      console.log('跳转')
      this.$router.push({ path: '/Submit', query: { pid: pid } })
      this.drawer = false
      this.$emit('inputdrawer', this.drawer)
      location.reload()
    },
    async getProlem () {
      this.loading = true
      let params = new URLSearchParams()
      params.append('pageNum', this.currentPage)
      params.append('pageSize', this.pageSize)
      if (this.pHard !== '题目难度') {
        params.append('problemDifficuly', this.pHard)
      }
      if (this.pTag !== '题目标签') {
        params.append('tagId', this.pTag)
      }
      params.append('title', this.searchTitle)
      let dataProblemsByPage = await this.$http
        .get('/problem/list', params)
        .catch(() => {
          this.loading = false
        })
      if (dataProblemsByPage.code !== 10000) {
        this.$message.error('题目获取失败！')
      }
      this.tableData = dataProblemsByPage.datas[0]
      this.total = dataProblemsByPage.datas[1]
      this.loading = false
    },
    // 获取用户解答状态
    async getProblemSovle () {
      let params = new URLSearchParams()
      params.append('username', this.$store.getters.getUsername)
      let dataProblemSolve = await this.$http.get('/problem/getProblemSolve', params)
      let dataTempSolve = dataProblemSolve.datas[0]
      for (let i = 0; i < dataTempSolve.length; i++) {
        this.problemSolveMap.set(dataTempSolve[i].pid, dataTempSolve[i].solved)
      }
    },
    switchPage (val) {
      this.currentPage = val
      this.getProlem()
    },
    getallproblem () {
      this.currentPage = 1
      this.pageSize = 18
      this.total = 0
      this.count = 1
      this.pHard = '题目难度'
      this.pTag = '题目标签'
      this.searchTitle = ''
      this.getProlem()
    }
  }

}
</script>
<style scoped>
.drawer-box{
  height: 100%;
  width: 100%;
  background: rgb(255, 255, 255);
}
.list-header{
  width: 100%;
  height: 70px;
  border-bottom:1px solid rgb(228, 231, 237);
}
.show-all-problem{
  background: rgb(255, 255, 255);
  margin-top: 15px;
  position: absolute;
  left: 30px;
  color:  rgb(0, 0, 0);
}
.harder-select{
  position: absolute;
  right: 150px;
  margin-top: 16px;
  background-color:  rgb(255, 255, 255);
}
.tab-select{
  position: absolute;
  right: 10px;
  margin-top: 16px;
  background-color:  rgb(255, 255, 255);
}
.problem-list{
  margin:1px;
  min-height: 1322px;
  border-bottom:1px solid rgb(228, 231, 237);
  background:   rgb(255, 255, 255);
}
.pagination{
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  top: 15px;
  background-color: rgb(255, 255, 255);
  color: white;
}
.page-select{
  position:absolute;
  bottom: 0px;
  width: 100%;
  height: 80px;
}
.select-box{
  position:absolute;
  width: 30%;
  top: 15px;
  left:32%;
}
.select-button{
  position:absolute;
  width: 10%;
  top: 15px;
  left:20%;
}
</style>
